<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理</title>
    <style>
        label {
            display: inline-block;
            width: 200px;
            text-align: right;
        }
    </style>

    <script src="js/axios.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/jquery-3.6.1.min.js"></script>
    <script src="js/qs.js"></script>
</head>
<body>

<div id="app">
    编号<input v-model="book.id">
    <span>书名</span><input v-model="name">
    <span>出版社</span><input v-model="press">
    <span>作者</span><input v-model="author">
    <span></span>
    <button @click="query(name,press,author)">查询</button>
    <a href="addbook.html">增加书籍</a>
    <table style="width: 100%" border="1">
        <tr>
            <th>编号</th>
            <th>书名</th>
            <th>出版社</th>
            <th>出版日期</th>
            <th>作者</th>
            <th>库存</th>
            <th>图片</th>
            <th>删除</th>
        </tr>
        <tr v-for="book in list">

            <th>{{book.id}}</th>
            <th>{{book.bookname}}</th>
            <th>{{book.bookpress}}</th>
            <th>{{book.pressdate}}</th>
            <th>{{book.bookauthor}}</th>
            <th>{{book.bookcount}}</th>
            <th><img :src="book.bookimage" height="100px"></th>
            <th ><button id="{{book.id}}" @click.prevent="delete(this.book)">删除</button> </th>
        </tr>
    </table>
</div>
<script>
    var list = [];
    var book = {};
    var press;
    var author;
    var vue = new Vue({
        el: "#app",
        data: {
            list: [],
            name: "",
            press: "",
            author: ""
        },
        created: function () {
            axios({
                method: 'get',
                url: "/BookManage_war/QueryAll.do",
                data: {
                    /* name : this.name,
                     press: this.press,
                     date: this.date,*/
                }
            }).then((res) => {
                this.list = res.data;
                console.log(this.list)
            });
        },
        methods: {
            query(name, press, author) {
                axios({
                    method: 'post',
                    url: "/BookManage_war/QueryBook.do",
                    params: {
                        name: name,
                        press: press,
                        author: author
                    }

                }).then((res) => {
                    console.log(name)
                    console.log(author)
                    this.list = res.data;
                    console.log(this.list)
                });
            },
            delete(id) {
                var id = id;
                console.log(id+"jjj")
            axios({
                    method: 'post',
                    url: "/BookManage_war/DeletBook.do",
                    params: {
                        id: id
                    }

                }).then((res) => {

                });
            }


        }

    });
</script>

</body>
</html>